<script setup lang="ts">
import { animation } from 'vjmap3d';
import { ref, watch } from 'vue';
const props = defineProps<{
    tollName: string,
    carCount: number
    personName: string,
    personId: string
}>()

// 收费站名称
const tollName = ref(props.tollName);
// 当天已经通车的次数
const carCount = ref(0);
// 值班人员名称
const personName = ref(props.personName);
// 值班人员ID
const personId = ref(props.personId);
// 车次数，用于动画的结果数
const carNum = ref(0);
watch(carCount, () => {
    // 数字滚动动画
    animation({
        id: "carCountAnim",
        from:  { value: 0},
          // @ts-ignore
        to: { value: carCount.value},
        duration: 500,
        onProgress: (target) => {
            // 取整下
            carNum.value = Math.round(target.value);
        },
        onComplete: (target, isEnd, isStop) => {
            // 取整下
            carNum.value = Math.round(target.value);
        }
    })
})
carCount.value = props.carCount;

defineExpose({
    tollName,
    carCount,
    personName,
    personId
})
</script>

<template>
    <div style="width:500px;height:400px;position: absolute;color: #fff;z-index: 12;font-size: 16px;">
        <div style="position:relative;top:-280px;left: -230px;">
            <!-- 收费站标签信息背景图片 -->
            <div style="position: absolute;left: 0px;top: 0px;">
                <img src="../assets/infobg.png" alt="" style="width:400px; opacity: 1.0;">
            </div>
            <div style="color: linear-gradient(red, blue);position:absolute;left:25px;top:40px;font-size:16px">
                {{ tollName }}
            </div>

            <div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
                <span>{{ carNum }}</span><span style="font-size: 14px;">
                    车次
                </span>
            </div>
            <div style="position:absolute;left:85px;top:163px;padding:8px 25px;">
                <span>{{ personName }}</span>
            </div>
            <div style="position:absolute;left:200px;top:165px;padding:8px 25px;">
                工号：<span>{{ personId }}</span>
            </div>
        </div>
    </div>
</template>

<style scoped></style>